import React, { useState } from "react";
import { Button, Modal } from "antd";
import {ShareAltOutlined} from '@ant-design/icons';
import { useSelector } from "react-redux";
import { QRCodeSVG } from "qrcode.react";
type Props = {};

const Share = (props: Props) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //获取数据
  const content = useSelector((store: any) => store.store.Share);
  return (
    <div>
      <ShareAltOutlined onClick={showModal}></ShareAltOutlined>
      <Modal
        title="Share Poster"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText={"下载"}
        cancelText={"关闭"}
      >
        <div className="Sharebox">
          <img src={content.cover} alt="" />
          <b>{content.title}</b>
          <p>
            <QRCodeSVG
              value={content.cover}
              size={100}
              bgColor={"#ffffff"}
              fgColor={"#000000"}
              level={"L"}
              includeMargin={false}
              
            />
          </p>
        </div>
      </Modal>
    </div>
  );
};

export default Share;
